<template>
	<view class="header-col">
		<view class="school">{{userInfo.schoolName}}</view>
		<view class="grade"><b>{{userInfo.eduLevel}}{{userInfo.gradeName}}({{userInfo.className}})</b></view>
		
		<view class="top-right">
			<view class="weather">
				<image v-if="baseImgURL" :src="baseImgURL+icon" > </image> {{weather.temp}}°C</span>
			</view>
			<view class="date">
				<text>{{weather.windScale}}级{{weather.windDir}} {{weather.text}}</text>
				<text style="margin-right: 3px">{{ this.week }}</text>
				<text>{{ this.nowTime.toString().slice(0, 4) }}</text>/
				<text>{{ this.nowTime.toString().slice(5, 7) }}</text>/
				<text>{{ this.nowTime.toString().slice(8, 10) }}</text>
			</view>
			<view class="date2">{{ this.nowTime.toString().slice(11, 16) }}</view>
			<view class="settings" @click="openSetting"></view>
			<view class="icon-switch" @click="switchCategory"></view>
			<!-- <button  @click="refreshPage">刷新</button> -->
		</view>
		
		<PopWindow title="设置" :visible.sync="isVisible"  width="330.63rpx" height="273.44rpx">
			 <template v-slot:content>
				 <SystemInfo ></SystemInfo>
			 </template>
			
		</PopWindow>	 
	</view>
</template>

<script>
	import SystemInfo from '@/components/SystemInfo/SystemInfo.vue';
	import timeFunction from '../../utils/timeFunction';
	import {fetchData} from '@/utils/request';
	import PopWindow from '../PopWindow/PopWindow.vue';
	import  {mapState} from 'vuex'
	export default {
		name: "HeaderTop",
		data() {
			return {
				location:'101010100',
				nowTime: '2024/01/01 00:00:00',
				week: '星期一',
				weather: {
					temp: '15',
					windScale: '3',
					windDir: '东风',
					text: '晴'
				},
				icon: '/weatherIcons/cloudy.png',
				timer: '',
				tianqi: '',
				isVisible: false, //用来控制设置的显示隐藏
				currentModule: 'home'
				
			};
		},
		computed:{
			...mapState(['classId','baseImgURL','schoolId','userInfo'])
		},
		components:{
			PopWindow,SystemInfo
		},
		beforeDestroy() {
			if (this.timer) clearInterval(this.timer);
			if (this.tianqi) clearInterval(this.tianqi);
		},
		created() {
			this.getWeather();
			this.nowTime = timeFunction.getStandardTime();
			this.week = timeFunction.judgeWeek(this.nowTime);

			this.tianqi = setInterval(() => {
				this.getWeather();
			}, 1800000);
			this.timer = setInterval(() => {
				this.nowTime = timeFunction.getStandardTime();
				this.week = timeFunction.judgeWeek(this.nowTime);
			}, 1000);
		},
		methods: {
			refreshPage(){
				const currentPage = getCurrentPages()[getCurrentPages().length - 1];
				// 刷新当前页面
				currentPage.onLoad();
			},
			openSetting(){
				this.isVisible = true;
			},
			switchCategory(){
				  uni.navigateTo({
				  	url:'/pages/category/category'
				  })
			},
			getWeather() {
				// 参数：location(地区代码)需要查询地区的LocationID或以英文逗号分隔的经度,纬度坐标（十进制，最多支持小数点后两位），
				// LocationID可通过城市搜索服务获取。例如 location=101010100 或 location=116.41,39.92
				// 文档：https://dev.qweather.com/docs/api/geoapi/city-lookup/
				// 文档：https://dev.qweather.com/docs/api/weather/weather-now/
				fetchData({
					url: 'https://devapi.qweather.com/v7/weather/now',
					method: 'get',
					data: {
						location: this.location,
						key: '4dc320e62237407db5c16ef45825cc7d'
					}
				}).then(res => {
					console.log(res, '天气')
					
					if (res.code == 200) {
						this.weather = res.now;
						this.icon = this.getWeatherIcon(this.weather.icon);
					} else {
						console.log("获取天气失败");
					}
				})
			},
			getWeatherIcon(icon) {
				// 图标代码：和风天气图标代码 https://dev.qweather.com/docs/resource/icons/
				// 对应clear.png（晴），100，150，900，901，999
				// 对应cloudy.png（多云），101，102，103，151，152，153
				// 对应overcast.png（阴），104
				// 对应lightRain.png（小雨），305，300 ，309，314，350
				// 对应moderateRain.png（中雨），306，315，351，399
				// 对应heavyRain.png（大雨），307 ，301，308，310，311，312，313，316，317，318
				// 对应thundershower.png（雷阵雨），302，303，304，
				// 对应snow.png（雪），400，401，402，403，404，405，406，407，408，409，410，456，457，499
				// 对应fog.png（雾），500，501，502，503，504，507，508，509，510，511，512，513，514，515
				const iconCode = parseInt(icon);
				if ([100, 150, 900, 901, 999].includes(iconCode)) {
					return '/weatherIcons/clear.png';
				} else if ([101, 102, 103, 151, 152, 153].includes(iconCode)) {
					return '/weatherIcons/cloudy.png';
				} else if (iconCode === 104) {
					return '/weatherIcons/overcast.png';
				} else if ([305, 300, 309, 314, 350].includes(iconCode)) {
					return '/weatherIcons/lightRain.png';
				} else if ([306, 315, 351, 399].includes(iconCode)) {
					return '/weatherIcons/moderateRain.png';
				} else if ([307, 301, 308, 310, 311, 312, 313, 316, 317, 318].includes(iconCode)) {
					return '/weatherIcons/heavyRain.png';
				} else if ([302, 303, 304].includes(iconCode)) {
					return '/weatherIcons/thundershower.png';
				} else if ([400, 401, 402, 403, 404, 405, 406, 407, 408, 409, 410, 456, 457, 499].includes(iconCode)) {
					return '/weatherIcons/snow.png';
				} else if ([500, 501, 502, 503, 504, 507, 508, 509, 510, 511, 512, 513, 514, 515].includes(iconCode)) {
					return '/weatherIcons/fog.png';
				} else {
					return '/weatherIcons/clear.png';
				}
			},
		}
	}
</script>

<style lang="scss">
	
	.header-col {
		height: 46.88upx;
		display: flex;
		box-sizing: border-box;
		color: #fff;
		align-items: center;
	}

	.school {
		text-shadow: 0px 3px 5px rgba(0, 78, 231, 0.32);
		font-size: 14.72upx;
		margin-left: 17.19upx;
	}

	.grade {
		text-shadow: 0px 3px 5px rgba(0, 78, 231, 0.32);
		font-size: 14.72upx;
		margin-left: 3.91upx;
	}
	.top-right {
		flex:1;
		display: flex;
		justify-content: flex-end;
		margin-right:20upx;
		align-items: center;
	}

	.weather {
		position: relative;
		width: 72.66upx;
		height: 29.69upx;
		font-size: 11.72upx;
		display: flex;
		align-items: center;
		image {
			width:38upx;
		}
	}

	.weather span {
		position: absolute;
		right: 3.91upx;
	}

	.date {
		width: 76.56upx;
		text-shadow: 0px 3px 5px rgba(0, 78, 231, 0.32);
		margin-left: 21.48upx;
		font-size: 7.81upx;
	}

	.date2 {
		font-size: 11.72upx;
		text-shadow: 0px 3px 5px rgba(0, 78, 231, 0.32);
		margin-left: 30.86upx;
	}

	.settings,.icon-switch {
		width: 22.66upx;
		height: 22.66upx;
		border-radius: 50%;
		margin-left: 13.88upx;
		margin-top: 0upx;
		background-color: #A4C5FA;
		background: url($imageurl+'/icon_Settings.png') left top no-repeat;
		background-size: 100%;
	}
	.icon-switch {
		background: url($imageurl+'/icon/switch.png') left top no-repeat;
		background-size: 100%;
	}
 .title-set {
	 text-align: center;
	 position: relative;
	 font-size: 15.63upx;
 }
</style>